<template>
	<div id="page" style="position: relative">
		<topNavigation :linkMsg="linkMsg"></topNavigation>
		<div
			style="display: flex; justify-content: center; position: relative"
			v-loading="pageShow"
		>
			<div style="width: 90vw; position: absolute; z-index: 999">
				<el-card shadow="hover">
					<el-collapse v-model="activeNames">
						<el-collapse-item title="Consistency" name="1">
							<template #title>
								<div style="width: 100%">
									<div
										style="
											display: flex;
											align-items: center;
											margin-left: 2vw;
											margin-right: 2vw;
										"
									>
										<div
											style="margin: 0 2.5vw; width: 60px"
										>
											<div>
												<el-link
													style="font-weight: bold"
													@click="
														selectCategory('推送')
													"
													type="danger"
													>推送</el-link
												>
											</div>
										</div>
										<div
											v-for="(
												item, index
											) in categoryList"
											:key="index"
											v-show="index < 8"
											style="
												margin: 0 2.5vw;
												width: 60px;
												display: flex;
												justify-content: center;
											"
										>
											<div>
												<el-link
													style="font-weight: bold"
													:type="
														typeColorChange(index)
													"
													@click="
														selectCategory(
															item.categoryname
														)
													"
												>
													{{ item.categoryname }}
												</el-link>
											</div>
										</div>
									</div>
								</div>
							</template>
							<template #default>
								<div style="width: 100%">
									<div
										style="
											display: flex;
											align-items: center;
											flex-wrap: wrap;
											margin-left: 2vw;
											margin-right: 2vw;
										"
									>
										<div
											v-for="(
												item, index
											) in categoryList"
											:key="index"
											v-show="index >= 8"
											style="
												margin: 0 2.5vw;
												margin-top: 2vh;
												margin-bottom: 1vh;
												width: 60px;
												display: flex;
												justify-content: center;
											"
										>
											<div>
												<el-link
													style="font-weight: bold"
													@click="
														selectCategory(
															item.categoryname
														)
													"
													:type="
														typeColorChange(index)
													"
												>
													{{ item.categoryname }}
												</el-link>
											</div>
										</div>
									</div>
								</div>
							</template>
						</el-collapse-item>
					</el-collapse>
				</el-card>
			</div>
			<div style="width: 85vw; margin-top: 15vh">
				<div style="width: 100%">
					<div
						style="width: 100%"
						v-for="(item, index) in blogData"
						:key="index"
						ref="categoryShowTarget"
					>
						<categoryShow
							:blogData="item"
							v-if="categoryShowTargetIsVisible[index]"
						></categoryShow>
						<div v-else style="height: 21vh; width: 100%">
							<el-skeleton :rows="4" animated />
						</div>
					</div>
				</div>
			</div>
		</div>
		<pageFooter></pageFooter>
	</div>
</template>

<script setup>
import { onBeforeMount, onMounted, watch } from 'vue';
import topNavigation from '../components/topNavigation.vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import pageFooter from '../components/pageFooter.vue';
//异步组件引入
import { useIntersectionObserver } from '@vueuse/core';
const categoryShow = defineAsyncComponent(() =>
	import('../components/categoryShow.vue')
);
const categoryShowTarget = ref(null); //相当于一个dom元素，给需要隐藏或显示的元素加上个ref = target 就完事了，但不能给组件，组件外面套一层div，给div的
const categoryShowTargetIsVisible = ref([]); //这个是控制异步组件显示与否的，给组件加个v-if来绑定这个
for (let i = 0; i < 9999; i++) {
	categoryShowTargetIsVisible.value[i] = false;
}
let count = ref(0);
const { stop } = useIntersectionObserver(
	categoryShowTarget,
	([{ isIntersecting }]) => {
		if (isIntersecting) {
			categoryShowTargetIsVisible.value[count.value] = isIntersecting;
			if (scrollState.value) {
				count.value++;
			} else {
				return;
			}
		}
	}
);

const router = useRouter();

const activeNames = ref('0');
const categoryList = ref(null);
const pageShow = ref(true);
const blogData = ref(null);
const scrollState = ref(true);
const scrollTop = ref(0);

const data = reactive({
	oldScrollTop: 0,
});
const scrolling = () => {
	scrollTop.value =
		window.pageYOffset ||
		document.documentElement.scrollTop ||
		document.body.scrollTop;

	if (data.oldScrollTop > scrollTop.value) {
		scrollState.value = false;
	} else {
		// 更新——滚动前，滚动条距文档顶部的距离
		data.oldScrollTop = scrollTop.value;
		scrollState.value = true;
	}
	if (scrollTop.value === 0) {
		data.oldScrollTop = 0;
	}
};

onMounted(() => {
	window.addEventListener('scroll', scrolling);
});
onUnmounted(() => {
	window.removeEventListener('scroll', scrolling);
});

const selectCategory = async (categoryname) => {
	if (categoryname) {
		if (categoryname === '推送') {
			try {
				const res = await axios({
					baseURL: 'http://localhost:5000',
					url: '/getUserPartBlog',
					method: 'post',
					data: {
						limit: 999,
					},
				});
				if (res.data.state === 'error') {
					return ElMessage({
						title: 'Error',
						message: '服务器错误',
						type: 'error',
					});
				} else {
					return (blogData.value = res.data.data);
				}
			} catch (error) {
				return ElMessage({
					title: 'Error',
					message: '请检查本地网络',
					type: 'error',
				});
			}
		} else {
			try {
				const res = await axios({
					baseURL: 'http://localhost:5000',
					url: '/getPartCategoryBlog',
					method: 'post',
					data: {
						limit: 999,
						categoryname,
					},
				});
				if (res.data.state === 'error') {
					return ElMessage({
						title: 'Error',
						message: '服务器错误',
						type: 'error',
					});
				} else {
					return (blogData.value = res.data.data);
				}
			} catch (error) {
				console.log(error);
				return ElMessage({
					title: 'Error',
					message: '请检查本地网络',
					type: 'error',
				});
			}
		}
	} else {
		return ElMessage({
			title: 'Error',
			message: '服务器错误，请刷新页面',
			type: 'error',
		});
	}
};

const typeColorChange = (index) => {
	let typeList = ['primary', 'success', 'info', 'warning', 'danger'];
	if (index > 5) {
		index = index % 5;
		return typeList[index - 1];
	} else {
		return typeList[index - 1];
	}
};

onBeforeMount(async () => {
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getCategory',
			method: 'get',
		});
		if (res.data.state === 'error') {
			ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			categoryList.value = res.data.data;
		}
	} catch (error) {
		console.log(error);
		ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getUserPartBlog',
			method: 'post',
			data: {
				limit: 999,
			},
		});
		if (res.data.state === 'error') {
			ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			blogData.value = res.data.data;
			console.log(blogData.value);
		}
	} catch (error) {
		console.log(error);
		ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
	pageShow.value = false;
});

const linkMsg = [
	{
		linkName: '发现',
		linkMethod: () => {
			router.push('/discover');
		},
	},
	{
		linkName: '留言板',
		linkMethod: () => {
			router.push('/board');
		},
	},
	{
		linkName: '我的',
		linkMethod: () => {
			router.push('/aboutMe');
		},
	},
];
</script>

<style scoped></style>
